<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魅族</title>
    <link rel="shortcut icon" href="../favicon-90c2e618ff.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/pc_common.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/shoppingCar.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <!-- ************** 头部 start ************** -->
    <div class="MZ_header">
        <div class="header">
            <div class="log">
                <a href="../html/index1.html">
                    <img src="../images/log01.png" alt="">
                </a>
            </div>
            <ul class="liucheng">
                <li>购物车 ></li>
                <li>确认订单 ></li>
                <li>在线支付 ></li>
                <li>完成</li>
            </ul>
            <ul class="tips">
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li>
                    <a class="zz" href="./login.html">登录</a>
                </li>
                <li>
                    <a class="yy" href="./register.html">注册</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- ************** 头部 end ************** -->

    <!-- ************** 中部内容区 start ************** -->
    <div class="MZ_content">
        <div class="content">
            <!-- ************* 购物车 *************** -->
            <div class="header">
                <ul>
                    <li class="li1">
                        <label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选
                        </label>
                    </li>
                    <li class="li2">商品</li>
                    <li class="li3">单价</li>
                    <li class="li4">数量</li>
                    <li class="li5">小计</li>
                    <li class="li6">操作</li>
                </ul>
            </div>

            <div class="catbox">
                <table id="cartTable">
                    <tbody>
                        <!-- <tr>
                            <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                            <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                            <td class="price">5999.88</td>
                            <td class="count"><span class="reduce"></span>
                                <input class="count-input" type="text" value="1" readonly/>
                                <span class="add">+</span>
                            </td>
                            <td class="subtotal">5999.88</td>
                            <td class="operation"><span class="delete">删除</span></td>
                        </tr>
                        <tr>
                            <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                            <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50
                                    HS</span></td>
                            <td class="price">3888.50</td>
                            <td class="count"><span class="reduce"></span>
                                <input class="count-input" type="text" value="1" />
                                <span class="add">+</span>
                            </td>
                            <td class="subtotal">3888.50</td>
                            <td class="operation"><span class="delete">删除</span></td>
                        </tr>
                        <tr>
                            <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                            <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                            <td class="price">1428.50</td>
                            <td class="count"><span class="reduce"></span>
                                <input class="count-input" type="text" value="1" />
                                <span class="add">+</span>
                            </td>
                            <td class="subtotal">1428.50</td>
                            <td class="operation"><span class="delete">删除</span></td>
                        </tr>
                        <tr>
                            <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                            <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini
                                    25</span></td>
                            <td class="price">640.60</td>
                            <td class="count"><span class="reduce"></span>
                                <input class="count-input" type="text" value="1" />
                                <span class="add">+</span>
                            </td>
                            <td class="subtotal">640.60</td>
                            <td class="operation"><span class="delete">删除</span></td>
                        </tr> -->
                    </tbody>
                </table>
            </div>

            <div class="foot" id="foot">
                <label class="wo">
                    <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选
                </label>

                <a class="fl" id="deleteAll" href="javascript:;">删除</a>

                <div class="fr closing" onclick="getTotal();">
                    <span> 去&nbsp;结&nbsp;算 </span>
                </div>

                <input type="hidden" id="cartTotalPrice" />
                <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>

                <div class="fr selected" id="selected">已选商品<span id="selectedTotal"> 0 </span>件<span
                        class="arrow up"></span><span class="arrow down"></span></div>
                <div class="selected-view">
                    <div id="selectedViewList" class="clearfix">
                        <div><img src=""><span>取消选择</span></div>
                    </div>
                    <span class="arrow">◆<span>◆</span></span>
                </div>
            </div>
            <!-- ************* 购物车 *************** -->
        </div>
    </div>
    <!-- ************** 中部内容区 end ************** -->

    <!-- ************** 引入尾部 star ************** -->
    <div class="MZ_footer">
    </div>
    <!-- ************** 引入尾部 end ************** -->

</body>

<script>
    //引入尾部  和 回到顶部
    $(".MZ_footer").load("./common.html", function () {
        $.getScript("../js/goTop.js", function () {
            console.log("回到顶部js加载成功 ");
        })
    })



    // **************  标识用户身份 ************************* //
    var cookie = document.cookie;
    if (cookie) {
        var user = getCookie("lgc");
        if (user) {
            $(".tips .zz").html(`<a href="jacvascript:;">欢迎,${user}</a>`);
            $(".tips .yy").html(`<a href="./index1.html">退出登录</a>`);
            $(".tips .yy").click(function () {
                setCookie("lgc", "", -1);
                location.reload();
            })
        }
    } else {
        var user = "";
    }



    //********** 渲染区域***********//
    var cookie = document.cookie;
    if (cookie) {
        var user = getCookie("lgc");
        if (user) {

            searchShoppingCarByUser({
                user
            }).then(res => {
                console.log(res);
                var html = "";
                res.forEach(({
                    id,
                    goodsId,
                    goodsName,
                    goodsPrice,
                    buyNum,
                    goodsImg,
                    subTotal
                }) => {

                    html += `
                    <tr dataid="${id}">
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods">
                            <img src="${goodsImg}" alt="" />
                            <span>${goodsName}</span>
                        </td>
                        <td class="price">${goodsPrice}</td>
                        <td class="count"><span class="reduce"></span>
                            <input class="count-input" type="text" value="${buyNum}" readonly/>
                            <span class="add">+</span>
                        </td>
                        <td class="subtotal">${(buyNum * goodsPrice)}</td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>`
                })
                $("tbody").html(html);


                //*****************************
                // 全选
                $(".check-all").click(function () {
                    // 原生
                    // var status = this.checked; // 元素节点的属性
                    // console.log(status);

                    // jquery
                    var status = $(this).prop("checked");
                    console.log(status);

                    $(".check-one").prop("checked", status);
                    getTotal();
                })

                // 反选  每次点击 判断所有的单选框是否全部被选中
                $(".check-one").click(function () {

                    // $(".check-one")  所有的单选框
                    // $(".check-one:checked")  被选中的单选框
                    if ($(".check-one:checked").length > 0 && $(".check-one").length === $(
                            ".check-one:checked").length) {
                        $(".check-all").prop("checked", true);
                    } else {
                        $(".check-all").prop("checked", false);
                    }


                    getTotal();


                })

                $(".add").click(function () {

                    // 输入框  数量 加一 
                    var num = $(this).prev().val();
                    num++;
                    $(this).prev().val(num);

                    // 小计更新
                    var price = $(this).parent().prev().text() * 1;
                    $(this).parent().next().text((price * num).toFixed(2));

                    // 减号显示
                    $(this).prev().prev().text("-");
                    // 手势  解禁
                    $(this).prev().prev().css({
                        cursor: "pointer"
                    });

                    getTotal();
                })


                $(".reduce").click(function () {

                    //1 输入框  数量 加一 
                    var num = $(this).next().val();

                    //  3 减之前  判断  如果数量为1  不能减
                    if (num == 1) {
                        return false;
                    }

                    num--;

                    // 4 减之后  判断  如果数量为1  减号按钮的 “-” 消失   手势禁用
                    if (num == 1) {
                        $(this).text("");
                        $(this).css({
                            cursor: "no-drop"
                        });
                    }


                    $(this).next().val(num);

                    // 2 小计更新
                    var price = $(this).parent().prev().text() * 1;
                    $(this).parent().next().text((price * num).toFixed(2));

                    // // 
                    // $(this).prev().prev().text("-");

                    getTotal();
                })


                // 细节 
                // 每次删除商品之后 判断剩余的商品是否全选(全选=>反选)

                $(".delete").click(function () {
                    if (confirm("是否删除该商品?")) {
                        //包含删除这整条数据的tr
                        var id = $(this).parents("tr").attr('dataid');
                        console.log(id); // 确定要删除的对应id
                        //通过数据库找到这个数据进行删除
                        $.ajax({
                            type: "get",
                            url: "../php/deleteGradeById.php",
                            data: {
                                id
                            }, // {user: user},
                            async: true,
                            dataType: "json",
                            success: function (result) { // result 形参 接口返回的数据
                                var {
                                    status,
                                    detail
                                } = result;
                                if (status) {
                                    isAllChecked();
                                    getTotal();
                                } else {
                                    alert("detail");
                                }
                            }
                        })

                        $(this).parents("tr").remove();

                    }

                    // // $(this).parents("tr").remove();
                    // isAllChecked();
                    // getTotal();
                })



                $("#deleteAll").click(function () {
                    isAllChecked();
                    getTotal();

                    if (confirm("是否删除所有商品?")) {
                        var arr = $(".check-one:checked").parents("tr").map(function(){
                            return $(this).attr('dataid')
                        }).get();

                        var id =arr.join(',');
                        //包含删除这整条数据的tr
                        console.log(id); // 确定要删除的对应id

                        //通过数据库找到这个数据进行删除
                        $.ajax({
                            type: "get",
                            url: "../php/deleteGradeById.php",
                            data: {
                                id
                            }, // {user: user},
                            async: true,
                            dataType: "json",
                            success: function (result) { // result 形参 接口返回的数据
                                var {
                                    status,
                                    detail
                                } = result;
                                if (status) {
                                    isAllChecked();
                                    getTotal();
                                } else {
                                    alert("detail");
                                }
                            }
                        })
                        $(".check-one:checked").parents("tr").remove();


                        // var leg =  $(".check-one:checked").length
                        // for(var i = 0;i < leg;i++){



                        //     
                        // }
                    }
                })



                //全选反选
                function isAllChecked() {
                    if ($(".check-one:checked").length > 0 && $(".check-one").length === $(".check-one:checked")
                        .length) {
                        $(".check-all").prop("checked", true);
                    } else {
                        $(".check-all").prop("checked", false);
                    }
                }

                function getTotal() {
                    // 结算
                    var sum = 0;
                    var allPrice = 0;
                    $(".check-one:checked").each(function () {
                        var num = $(this).parents("tr").find(".count-input").val() * 1;
                        var subtotal = $(this).parents("tr").find(".subtotal").text() * 1;
                        sum += num;
                        allPrice += subtotal;
                    })

                    $("#selectedTotal").text(sum);
                    $("#priceTotal").text(allPrice.toFixed(2));
                }
                //***********************************************



            }).catch(err => {
                throw err;
            })

        } else {
            location.href = "./login.html?ReturnUrl=" + encodeURIComponent(location.href);
        }
    }
    //********** 渲染区域***********//

    $(document).on("click", "#deteleAll", function () {

        var list = $(".selectCenter:checked").parents(".shoppingCarConCenter01").map(function () {
            return $(this).attr("data-id");
        }).get();
        console.log(list);
        $(".selectCenter:checked").parents(".shoppingCarConCenter01").remove();
    })
</script>

</html>